<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>售水机</title>
		<meta name="keywords"  content="KEYWORDS..." />
		<meta name="description" content="DESCRIPTION..." />
		<meta name="author" content="DeathGhost" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name='apple-touch-fullscreen' content='yes'>
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.none{display:none;}
		</style>
	</head>
	<body style="background:#f6f6f6;">
		<div class="content">
			<header class="page-header1">
				<a href="../index.html"><img src="../img/icon_left.png" class="back_img" style="float:left;"/></a>
				<h3>设备管理</h3>
			</header>
			<div class="card_management">
				<div class="query">查询 <img src="../img/icon_bottom.png" style="width:4%;"/></div>
			</div>
			<div class="equipment_management">设备列表（总量：4台；在线：2台；故障：2台）</div>
			
			<div class="equipment_list">
				<div class="equipment_lists">
					<div class="equipment_lists_top">设备ID：1453<span class="personnel">净水运营商：网站人员</span><span class="note_name">备注名称：XXX</span></div>
					<div class="equipment_lists_center">
						<div class="equipment_state">
							<div class="equipment_states01">
								<div class="equipment_states">
									<span class="equipment_online">在线</span>
									<span class="equipment_problem">故障故障故障故障故障故障</span>
								</div>
							</div>
						</div>
						<div class="equipment_btn">
							<a href="equipment_revise.html"><button class="btn_change">修改</button></a>
							<a href="equipment_details.html"><button class="btn_mores">更多</button></a>
						</div>
					</div>
				</div>
				<div class="equipment_lists">
					<div class="equipment_lists_top">设备ID：1453<span class="personnel">净水运营商：网站人员</span><span class="note_name">备注名称：XXX</span></div>
					<div class="equipment_lists_center">
						<div class="equipment_state">
							<div class="equipment_states01">
								<div class="equipment_states">
									<span class="equipment_offline">在线</span>
									<span class="equipment_problem">故障故障故障故障故障故障</span>
								</div>
							</div>
						</div>
						<div class="equipment_btn">
							<a href="equipment_revise.html"><button class="btn_change">修改</button></a>
							<a href="equipment_details.html"><button class="btn_mores">更多</button></a>
						</div>
					</div>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<!--弹框-->
		<div class="pop-panel2">
			<div class="details">
				<div class="motherboard_list">
					<div class="motherboard_lists">
						<div class="motherboard_lists_left motherboard_number">主板编号</div>
						<div class="motherboard_lists_right motherboard_number_inp">
							<input type="text" name="motherboard_number_inps" value="" placeholder="请输入主板编号" class="motherboard_number_inps"/>
						</div>
					</div>
					
					<div class="motherboard_lists">
						<div class="motherboard_lists_left motherboard_firm">主板厂商</div>
						<div class="motherboard_lists_right motherboard_firm_inp">
							<input type="text" name="motherboard_firm_inps" value="" placeholder="请输入主板厂商" class="motherboard_firm_inps"/>
						</div>
					</div>
					
					<div class="motherboard_lists">
						<div class="motherboard_lists_left water_operators">水运营商</div>
						<div class="motherboard_lists_right water_operators_inp">
							<input type="text" name="water_operators_inps" value="" placeholder="请输入电话" class="water_operators_inps"/>
						</div>
					</div>
					
					<div class="motherboard_lists">
						<div class="motherboard_lists_left network_state">网络状态</div>
						<div class="motherboard_lists_right network_state_inp">
							<!--<input type="text" placeholder="请输入电话" class="network_state_inps"/>-->
							<div class="status">
								<div class="on-line">
									<div class="on-line_list_left">
										<div class="timecar-radio">
											<label for="timecar" onselectstart="return false" class="">
												<input type="radio" name="time" id="timecar1" value='1'/>
											</label>
										</div>
									</div>
									<div class="on-line_list_center">在线</div>
								</div>
								
								<div class="off-line">
									<div class="on-line_list_left">
										<div class="timecar-radio">
											<label for="timecar" onselectstart="return false" class="timecar-radioed">
												<input type="radio" name="time" id="timecar1" value='1'/>
											</label>
										</div>
									</div>
									<div class="on-line_list_center">离线</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="motherboard_lists">
						<div class="motherboard_lists_left device_status">设备状态</div>
						<div class="motherboard_lists_right device_status_inp" style="width:60%;">
							<input type="text" name="device_status_inps" value="" placeholder="请选择" class="device_status_inps status"/>
						</div>
						<div class="device_status_list_img">
							<img src="../img/icon_bottom.png" style="width:35%;"/>
						</div>
					</div>
					
					<div class="device_status_details none">
						<div class="device_status_list">
							<div class="device_status_list_left">
								<div class="timecar_radio">
									<label for="timecar" onselectstart="return false" class="">
										<input type="radio" name="time" id="timecar1" value='1'/>
									</label>
								</div>
							</div>
							<div class="device_status_list_center">测测试试1</div>
						</div>
						<div class="device_status_list">
							<div class="device_status_list_left">
								<div class="timecar_radio">
									<label for="timecar" onselectstart="return false" class="timecar_radioed">
										<input type="radio" name="time" id="timecar1" value='1'/>
									</label>
								</div>
							</div>
							<div class="device_status_list_center">测测试试2</div>
						</div>
						
					</div>
					
				</div>
				<div class="query_btn">
					<div class="query_btns">
						<div class="query_btn_cancel">
							<button class="btn_cancel">取消</button>
						</div>
						<div class="query_btn_confirm">
							<button type="button" class="btn_confirm">查询</button>
						</div>
					</div>
				</div>
			</div>
			<div class="bg"></div>
		</div>
	</body>
	<!--点击查询出现弹框-->
	<script type="text/javascript">
		$('.card_management').on('click',function(e){
		    $('.pop-panel2').show();
		    e.stopPropagation();
		})
		$('.query_btn_cancel').on('click',function(){
		    $('.pop-panel2').hide();
		})
	</script>
	
	<script type="text/javascript">
		$(".timecar-radio label").on('touchstart',function(){
			if($(this).hasClass('timecar-radioed')){
				$(".timecar-radio label").addClass("timecar-radioed");
				$(this).removeClass("timecar-radioed");
			}
		})
	</script>
	
	<script type="text/javascript">
		$(".timecar_radio label").on('touchstart',function(){
			if($(this).hasClass('timecar_radioed')){
				$(".timecar_radio label").addClass("timecar_radioed");
				$(this).removeClass("timecar_radioed");
			}
		})
	</script>
	
	<script type="text/javascript">
		$('.device_status_list_img').on('click',function(e){
			
			if($('.device_status_details').css('display') == 'block'){
				$('.device_status_details').hide();
			}else{
				$('.device_status_details').show();
			}
		    
		    
		})
	</script>
	<script type="text/javascript">
		$(".timecar_radio label").click(function(){
			var content = $(this).parent().parent().parent().find('.device_status_list_center').html();
		    	$('.status').val(content);
		$('.device_status_details').hide();
		});
		
		
	</script>
</html>
